<template>
	<view class="container">
		<!-- 通道模块 -->
		<view class="settings-section">
			<view class="section-title">模块</view>
			<view class="settings-list">
				<view class="settings-item" @tap="goToPage('/pages/passage/index')">
					<view class="item-left">
						<text class="item-title">通道</text>
					</view>
					<view class="item-right">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 系统设置 -->
		<view class="settings-section">
			<view class="section-title">系统设置</view>
			<view class="settings-list">
				<view class="settings-item" @tap="goToVersion">
					<view class="item-left">
						<text class="item-title">版本更新</text>
					</view>
					<view class="item-right">
						<text class="version-text">v1.0.2</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
				<view class="settings-item" @tap="goToPage('/pages/setting/system_announcement')">
					<view class="item-left">
						<text class="item-title">系统公告</text>
					</view>
					<view class="item-right">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
				<view class="settings-item" @tap="goToPage('/pages/setting/system_notification')">
					<view class="item-left">
						<text class="item-title">系统通知</text>
					</view>
					<view class="item-right">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
				<view class="settings-item" @tap="goToPage('/pages/setting/contact_us')">
					<view class="item-left">
						<text class="item-title">联系我们</text>
					</view>
					<view class="item-right">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 账号设置 -->
		<view class="settings-section">
			<view class="section-title">账号设置</view>
			<view class="settings-list">
				
				<view class="settings-item logout-item" @tap="handleLogout">
					<view class="item-left">
						<text class="item-title">退出登录</text>
					</view>
					<view class="item-right">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<!-- 消息弹窗 -->
		<message-box
			ref="messageBox"
			title="退出登录"
			message="确定要退出登录吗？退出后将无法使用本APP"
			cancelText="取消"
			confirmText="退出"
			confirmColor="#ff6b6b"
			@confirm="onConfirmLogout"
			@cancel="onCancelLogout"
		/>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { api } from '@/utils/request'
import Storages from '@/utils/storages'
import MessageBox from '@/components/MessageBox.vue'

const messageBox = ref(null)

// 处理退出登录
const handleLogout = async () => {
	messageBox.value.show()
}

// 确认退出登录
const onConfirmLogout = () => {
	// 清除用户信息
	uni.removeStorageSync(Storages.UserInfo.userInfo)
	// 清除搜索历史
	uni.removeStorageSync(Storages.UserInfo.searchHistory)
	
	// 显示提示
	uni.showToast({
		title: '已退出登录',
		icon: 'success'
	})
	
	// 延迟跳转到登录页
	setTimeout(() => {
		uni.reLaunch({
			url: '/pages/my/login/index'
		})
	}, 1500)
}

// 取消退出登录
const onCancelLogout = () => {
	console.log('取消退出登录')
}

// 跳转到版本更新页面
const goToVersion = () => {
	uni.navigateTo({
		url: '/pages/setting/version'
	})
}

// 新增一个函数，传入链接，跳转到对应页面
const goToPage = (url) => {
	uni.navigateTo({
		url: url
	})
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 20rpx;
}

.settings-section {
	margin-bottom: 20rpx;
	
	.section-title {
		font-size: 24rpx;
		color: #999;
		padding: 20rpx 30rpx;
	}
}

.settings-list {
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	
	.settings-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background: #f8f8f8;
		}
		
		.item-left {
			.item-title {
				font-size: 28rpx;
				color: #333;
			}
		}
		
		.item-right {
			display: flex;
			align-items: center;
			gap: 10rpx;
			
			.version-text {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		&.logout-item {
			.item-title {
				color: #ff6b6b;
			}
		}
	}
}
</style>
